import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import http from '../../utils/http'
import { ShareSheet, Tag, Cell, Button } from 'react-vant'
import { SendOutline } from 'antd-mobile-icons'
import { CheckShieldOutline } from 'antd-mobile-icons'
import { UserO, ChatO, ShopO, HomeO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { useAppSelector, useAppDispatch } from '../../store/store'
import styles from './index.module.css'
import { addCart } from '../../store/cartSlice'
import detailimg from '../../assets/药品详情.png'
import { Arrow, Records, GoodsCollectO, WarningO, PhoneO } from '@react-vant/icons';
import { useParams, useNavigate } from 'react-router-dom'
interface Detail {
    restorativesid: string;
    restorativesname: string;
    restorativesprice: number;
    restorativesdesc: string;
    restorativesimage: string;
    restorativestitle: string;
}
const Index: React.FC = () => {
    const dispath = useAppDispatch()
    const { id } = useParams()
    const { cartlist } = useAppSelector(state => state.cartSlice)
    const cartlength = cartlist.length
    const navigate = useNavigate()
    const [detail, setDetail] = useState<Detail>({} as Detail)
    const [visible, setVisible] = useState(false)
    const options = [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: 'QQ', icon: 'qq' },
    ]
    const getdetail = () => {
        http.get('/restorative/detail', { params: { id } }).then((result) => {
            const { code, data } = result.data
            if (code === 200) {
                setDetail(data[0])
            }
        })
    }
    const handpay = () => {
        console.log('支付')
    }
    useEffect(() => {
        getdetail()
    }, [])
    console.log(detail)
    return (
        <div>
            <NavBar onBack={() => navigate('/')} style={{ background: '#fff', position: 'sticky', top: '0', zIndex: '99999' }} right={<SendOutline onClick={() => setVisible(true)} fontSize={'25px'} />}>{detail.restorativesname}</NavBar>
            {/* 分享面板 */}
            <ShareSheet
                visible={visible}
                options={options}
                title='立即分享给好友'
                onCancel={() => setVisible(false)}
                onSelect={() => {
                    setVisible(false)
                }}
            />
            <div style={{ background: "#fff", height: '450px', borderRadius: '16px' }}>
                <div>
                    <img src={detail.restorativesimage} style={{ width: '100%', height: '300px' }} alt="" />
                </div>
                <div>
                    <p style={{ height: '50px', lineHeight: '50px', color: 'orangered', fontSize: '25px', padding: '5px' }}>￥{detail.restorativesprice}
                        <Tag color="#FAEBD7" style={{ marginLeft: '15px', height: '25px', lineHeight: '25px' }} textColor="#A52A2A">
                            2盒低至￥100起
                        </Tag>
                    </p>
                    <p style={{ height: '20px', lineHeight: '20px', fontSize: '20px', fontWeight: 'bold', marginLeft: '10px', marginBottom: ' 10px' }}>{detail.restorativesname} {detail.restorativestitle}</p>
                    <div className={styles.wsyy_one}>
                        <div className={styles.button_group}>
                            <div className={styles.checkmark}><CheckShieldOutline /></div>
                            <div className={styles.wsyy_title}>正品保障</div>
                            <div className={styles.checkmark}><CheckShieldOutline /> </div>
                            <div className={styles.wsyy_title}>隐私发货</div>
                            <div className={styles.checkmark}><CheckShieldOutline />  </div>
                            <div className={styles.wsyy_title}>专业药师</div>
                            <div className={styles.checkmark}><CheckShieldOutline /> </div>
                            <div className={styles.wsyy_title}>官网直供</div>
                        </div>
                    </div>
                </div>
            </div>

            <div style={{ display: 'flex', background: '#fff', borderRadius: ' 16px', height: ' 100px', alignItems: 'center', justifyContent: 'space-around', textAlign: 'center', margin: '10px' }}>
                <div style={{ borderRight: '1px solid #eee', lineHeight: '25px', padding: '25px' }}>
                    <GoodsCollectO fontSize={'20px'} />
                    <p style={{ fontWeight: 'bold' }}>产品介绍</p>
                    <p style={{ color: '#999' }}>育发、润发、...</p>
                </div>
                <div style={{ borderRight: '1px solid #eee', lineHeight: '25px', padding: '10px' }}>
                    <Records fontSize={'20px'} />
                    <p style={{ fontWeight: 'bold' }}>用法用量</p>
                    <p style={{ color: '#999' }}>外用。清洁患...</p>
                </div>
                <div style={{ lineHeight: '25px', padding: '10px' }}>
                    <WarningO fontSize={'20px'} />
                    <p style={{ fontWeight: 'bold' }}>服用禁忌</p>
                    <p style={{ color: '#999' }}>尚不明确</p>
                </div>
                <Arrow style={{ margin: 'auto' }} fontSize={'20px'} color='black' />
            </div>

            <Cell.Group card>
                <Cell title={detail.restorativesname} isLink />
                <Cell title='满68元包邮' isLink />
            </Cell.Group>
            <div style={{ width: '100vw', background: '#fff', textAlign: 'center' }}>
                <Button type='default' icon={<PhoneO color='#007AFF' />}>电话客服</Button>
                <Button type='default' icon={<ChatO color='#007AFF' />} onClick={() => navigate('/customerService')}>在线客服</Button>
            </div>

            <div style={{ marginTop: '20px' }}>
                <Cell title='评价（2）' isLink onClick={() => navigate('/buymedicinepinglun')} />
            </div>

            <div style={{ marginTop: '20px', background: '#fff', padding: '10px' }}>
                <Cell title='商品详情' />
                <p style={{ lineHeight: '35px', height: '60px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 'bold' }}>
                    {detail.restorativesdesc}
                </p>
                <img src={detailimg} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="" />
            </div>
            <div className={styles.demo_action_bar}>
                <ActionBar>
                    <ActionBar.Icon icon={<HomeO />} onClick={() => navigate('/')} text='首页' />
                    <ActionBar.Icon icon={<UserO />} onClick={() => navigate('/customerService')} text='客服' />
                    <ActionBar.Icon icon={<ShopO />} badge={{ content: cartlength }} text='商品清单' onClick={() => navigate('/BuymedicineCart')} />
                    <ActionBar.Button type='warning' onClick={() => dispath(addCart(detail))} text='加入清单' />
                    <ActionBar.Button type='danger' onClick={() => handpay()} text='立即购买' />
                </ActionBar>
            </div>
        </div>
    )
}

export default Index